<template>
  <div v-analytics.pageview>
    <topbar :nextAction="nextAction" rightTitle="Next" category="Continue With Cellphone Page"></topbar>
    <div class="login-content">
      <img src="~assets/login/phoneBg.png" class="login-ideograph">
      <label class="login-label">Input cell phone number</label>
      <div class="input-group" :class="$style.group">
        <div
          class="input-group-addon"
          :class="$style.addon"
          @click="selectCountry"
          v-analytics.click="{
            action: 'Select Country Click ',
            category: 'Continue With Cellphone Page',
          }"
        >
          {{addonText}}
        </div>
        <input class="form-control" type="tel" v-model="mobileText" />
      </div>
    </div>
    <modal
      v-model="showModal"
      :shade="true"
      cancelText="Cancel"
      okText="Select"
      :confirmDisabled="confirmDisabled"
      title="Please select a country to shop"
    >
      <radiolist
        v-model="contryChecked"
        :options="countryMobileList"
        name="country"
      />
    </modal>
    <loading :show="showLoading" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { radiolist, modal, button, toast, loading, topbar } from 'components'
import { analyticsFn } from 'directive/analytics'

export default {
  name: 'byPhone',
  components: {
    vButton: button,
    radiolist,
    modal,
    topbar,
    loading,
  },
  computed: {
    ...mapState({
      countryMobileList: state => state.login.countryMobileList,
    }),
  },
  data() {
    return {
      showModal: false,
      confirmDisabled: true,
      contryChecked: '',
      addonText: 'Select Country',
      areaCode: '',
      mobileText: '',
      showLoading: false,
    }
  },
  created() {
    this.$store.dispatch('getCountry')
  },
  watch: {
    contryChecked(val) {
      if (val) {
        this.addonText = `+${val}`
        this.confirmDisabled = false
        this.areaCode = val

        analyticsFn({
          category: 'Continue With Cellphone Page',
          action: 'Select Countey-Select',
          label: val,
        })
      }
    },
  },
  methods: {
    selectCountry() {
      this.showModal = true
    },
    nextAction() {
      if (!this.mobileText) {
        toast('Please enter your phone number')
        return
      }
      if (!this.areaCode) {
        toast('Please select a country')
        return
      }
      this.showLoading = true
      this.$store.dispatch('getVercode', { areaCode: this.areaCode, mobile: this.mobileText })
        .then((res) => {
          this.showLoading = false
          if (res.code === 1000) {
            toast(res.info)
            if (sessionStorage.isThrid !== 1) {
              sessionStorage.isLogin = 0
              this.$router.push({ path: '/login/verifyCode', query: { areaCode: this.areaCode, mobile: this.mobileText } })
            } else {
              this.$router.push({ path: '/login/verifyCode', query: { areaCode: this.areaCode, mobile: this.mobileText } })
            }
          } else if (res.code === 3500) {
            // 已注册直接进入输入密码页面
            if (sessionStorage.isThrid !== 1) {
              sessionStorage.isLogin = 1
              this.$router.push({ path: '/login/passwd', query: { areaCode: this.areaCode, mobile: this.mobileText } })
            } else {
              this.$router.push({ path: '/login/passwd', query: { areaCode: this.areaCode, mobile: this.mobileText } })
            }
          } else {
            toast(res.info)
          }
        })
    },
  },
}
</script>
<style module lang="scss">
.group {
  margin-top: 16px;
  width: 100%;
}

.addon {
  width: 80px;
}
</style>
